<script setup>
import {Search} from "@element-plus/icons-vue";
import {computed, ref,onMounted} from "vue";
import {useTestStore} from "@/store/index.js";
import Dialog from "@/components/Dialog.vue";

onMounted(()=>{
  const Test = useTestStore()
  Test.setData()
})


const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.username.toLowerCase().includes(search.value.toLowerCase())||
        data.role.toLowerCase().includes(search.value.toLowerCase())
  )
)
const tableData = useTestStore().data.data
const options = [
  {prop:"id",label:"ID"},
      {prop:"username",label:"用户名"},
      {prop:"password",label:"密码"},
      {prop:"role",label:"角色"},
      {prop:"action",label:"操作"},
]
const handleDialogValue = ()=> {
  dialogTitle.value='添加用户'
  dialogVisible.value=true
}
const dialogVisible=ref(false)
const queryForm = ref({
  query:'',
  pageNum:1,
  pageSize:2
})
const handleSizeChange = (pageSize)=>{
  queryForm.value.pageSize = pageSize
  queryForm.value.pageNum = 1
}
const handleCurrentChange = (pageNum)=>{
  queryForm.value.pageNum = pageNum
}
const dialogTitle =ref('')
</script>

<template>
<el-card>
  <el-row :gutter="20" class="header">
    <el-col :span="7"><el-input placeholder="搜索" clearable v-model="search"/></el-col>
    <el-button type="primary" @click="handleDialogValue">添加用户</el-button>
  </el-row>
  <el-table :data="filterTableData" stripe style="width: 100%">
    <el-table-column :prop="item.prop" :label="item.label" v-for="(item,index) in options" :key="index" align="center" >
      <template #default v-if="item.prop==='action'"><el-button type="primary" size="small">修改</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<el-pagination
      v-model:current-page="queryForm.pageNum"
      :page-sizes="[1, 2, 10, 15]"
      :page-size="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</el-card>
  <Dialog v-model="dialogVisible" :dialogTitle="dialogTitle"></Dialog>
</template>

<style scoped>

</style>